<template>
	<view class="item u-flex u-flex-col" @click.stop.prevent>
		<view class="chicken-img"><image src="../../../static/images/chick8.png" :lazy-load="true" mode="widthFix"></image></view>
		<view class="item-desc">成功抢到肉鸡后平台 可以宰杀包邮寄送</view>
		<view class="item-btn">疯狂抢鸡</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>
.item {
	width: 100%;
	min-height: 400rpx;
	background: rgba(255, 255, 255, 1);
	border: 4rpx solid rgba(167, 92, 26, 1);
	border-radius: 20rpx;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
}
.chicken-img {
	width: 106rpx;
	position: relative;
}
.chicken-img image {
	position: relative;
	z-index: 1;
	width: 100%;
}
.chicken-img::after {
	content: '';
	width: 106rpx;
	height: 38rpx;
	background:rgba(204,204,204,1);
	position: absolute;
	bottom: -10rpx;
	right:0;
	border-radius: 50%;
	/* box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.7); */
	/* transform: rotateZ(10deg); */
	transform-origin: bottom right;
	z-index: 0;
}
.item-desc {
	width: 100%;
	font-size: 28rpx;
	margin-top: 56rpx;
}
.item-btn {
	width: 240rpx;
	height: 70rpx;
	background: rgba(245, 179, 64, 1);
	border: 3rpx solid rgba(204, 126, 43, 1);
	border-radius: 20rpx;
	position: absolute;
	bottom: -35rpx;
	text-align: center;
	line-height: 70rpx;
	color: #ffffff;
}
</style>
